{% block sw_settings_rule_detail %}
<sw-page class="sw-settings-rule-detail">
    {% block sw_settings_rule_detail_header %}
    <template #smart-bar-header>
        <h2 v-if="rule">
            {{ rule.name }}
        </h2>
        <h2 v-else>
            {{ $tc('sw-settings-rule.detail.textHeadline') }}
        </h2>
    </template>
    {% endblock %}

    {% block sw_settings_rule_detail_actions %}
    <template #smart-bar-actions>

        {% block sw_settings_rule_detail_actions_cancel %}
        <mt-button
            v-tooltip.bottom="tooltipCancel"
            class="sw-settings-rule-detail__cancel-action"
            :disabled="isLoading"
            variant="secondary"
            size="default"
            @click="onCancel"
        >
            {{ $tc('global.default.cancel') }}
        </mt-button>
        {% endblock %}

        <sw-button-group
            v-tooltip.bottom="{
                message: $tc('sw-privileges.tooltip.warning'),
                disabled: acl.can('rule.editor'),
                showOnDisabledElements: true
            }"
            class="sw-settings-rule-detail__save-button-group"
            :split-button="true"
        >
            {% block sw_settings_rule_detail_actions_save %}
            <sw-button-process
                v-model:process-success="isSaveSuccessful"
                v-tooltip.bottom="tooltipSave"
                class="sw-settings-rule-detail__save-action"
                :is-loading="isLoading"
                variant="primary"
                :disabled="!acl.can('rule.editor')"
                @click="onSave"
            >
                {{ $tc('sw-settings-rule.detail.buttonSave') }}
            </sw-button-process>
            {% endblock %}

            {% block sw_settings_rule_detail_actions_save_context_menu %}
            <sw-context-button>
                <template #button>
                    <mt-button
                        class="sw-settings-rule-detail__button-context-menu"
                        square
                        variant="primary"
                        :disabled="isLoading || !acl.can('rule.editor')"
                        size="default"
                    >
                        <mt-icon
                            name="regular-chevron-down-xs"
                            size="16"
                        />
                    </mt-button>
                </template>

                {% block sw_settings_rule_detail_actions_save_context_menu_actions %}
                {% block sw_settings_rule_detail_actions_duplicate %}
                <sw-context-menu-item
                    class="sw-settings-rule-detail__save-duplicate-action"
                    :disabled="!acl.can('rule.creator') || !acl.can('rule.editor')"
                    @click="onDuplicate"
                >
                    {{ $tc('sw-product.detail.buttonSaveDuplicate') }}
                </sw-context-menu-item>
                {% endblock %}
                {% endblock %}
            </sw-context-button>
            {% endblock %}
        </sw-button-group>
    </template>
    {% endblock %}

    <template #language-switch>
        <sw-language-switch
            :save-changes-function="saveOnLanguageChange"
            :abort-change-function="abortOnLanguageChange"
            :disabled="!ruleId"
            @on-change="onChangeLanguage"
        />
    </template>

    {% block sw_settings_rule_detail_content %}
    <template #content>
        {% block sw_settings_rule_detail_tabs_discard_changes_modal %}
        <sw-discard-changes-modal
            v-if="isDisplayingSaveChangesWarning"
            @keep-editing="onLeaveModalClose(nextRoute)"
            @discard-changes="onLeaveModalConfirm(nextRoute)"
        />
        {% endblock %}
        <sw-card-view>
            {% block sw_settings_rule_detail_tabs %}
            <sw-tabs
                v-if="rule && !rule.isNew()"
                class="sw-settings-rule-detail__tabs"
                position-identifier="sw-settings-rule-detail"
            >
                {% block sw_settings_rule_detail_tab_items %}
                <sw-tabs-item
                    v-for="tab in tabItems"
                    :key="tab.route.name"
                    :class="'sw-settings-rule-detail__tab-item sw-settings-rule-detail__tab-item-' + tab.cssClassSuffix"
                    :route="tab.route"
                    :title="tab.title"
                    :has-error="tabHasError(tab)"
                >
                    {{ tab.title }}
                </sw-tabs-item>
                {% endblock %}
            </sw-tabs>
            {% endblock %}

            {% block sw_settings_rule_detail_content_view %}
            <template v-if="isLoading">
                <sw-skeleton variant="detail-bold" />
                <sw-skeleton />
            </template>

            <template v-else-if="rule !== null">
                <router-view
                    v-slot="{ Component }"
                    :key="$route.path"
                >
                    <component
                        :is="Component"
                        :rule="rule"
                        :conditions="conditions"
                        :condition-repository="conditionRepository"
                        :is-loading="isLoading"
                        :detail-page-loading="isLoading"
                        :rule-name-error="ruleNameError"
                        :rule-priority-error="rulePriorityError"
                        @conditions-changed="conditionsChanged"
                        @tree-finished-loading="setTreeFinishedLoading"
                    />
                </router-view>
            </template>
            {% endblock %}
        </sw-card-view>
    </template>
    {% endblock %}
</sw-page>
{% endblock %}
